<template>
  <div>
    <el-card>
      <!-- 轮播图 -->
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(item , index) in imgList" :key="index">
          <img class="img" :src="item.imageUrl" alt="">
        </el-carousel-item>
      </el-carousel>
      <!-- 推荐歌单 -->
      <div class="play-list">
        <h2 class="hot_recommend font-bold">
         热门推荐 <i class="el-icon-arrow-right"></i>
        </h2>
        <SongSheetList :playlist="recSongList"></SongSheetList>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getBanner,getPersonalized} from '../../api/request'
import SongSheetList from '../../components/list/SongSheetList.vue'
export default {
    components:{SongSheetList},
    data () {
        return {
            imgList:[],
            recSongList:[],
            limit:10,
        }
    },
    created(){
        this.getImgList();
        this.getRecSongList(this.limit);
    },
    methods:{
        // 获取轮播图图片
        async getImgList(){
           const {data:res} = await getBanner();
           if(res.code !== 200) return this.$message.error('请求轮播图数据失败！');
           res.banners.forEach((item) => {
            let {imageUrl,targetId} = item;
            this.imgList.push({imageUrl,targetId})
           })
        },
        //获取推荐歌单数据
        async getRecSongList(limit){
          const {data:res} = await getPersonalized(limit);
          if(res.code !== 200) return this.$message.error('获取歌单数据失败');
          res.result.forEach((item) => {
            let {id ,name ,picUrl,playCount,trackCount} = item;
            this.recSongList.push({id ,name ,picUrl,playCount,trackCount});
          })
        }
    }
};
</script>

<style lang="less" scoped>
    .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .img{
    height: 100%;
    cursor:pointer;
  }
  .hot_recommend{
    cursor:pointer;
  }
</style>